import React, { Component } from 'react'
import { Form, Input, Button, ImageUploader, Toast, Cascader } from 'antd-mobile'
import { LeftOutline } from "antd-mobile-icons";
import { getUsermsg, changeUsermsg, uploadImg } from '@api'
import { getToken } from '@utils/token.js'
import areas from './city'
import './index.scss'

export default class Setuser extends Component {
  formRef = React.createRef()
  state = {
    fileList: [],
    userinfo: {},
    isShow: false,
    visible: false
  }
  render() {
    return (
      <div className='sc_setuser'>
        <div className="item-head">
          <div className="goback" onClick={() => this.props.history.go(-1)}>
            <LeftOutline />
          </div>
          <div className="title">用户设置</div>
          <div className="gopage"> </div>
        </div>
        <div className='form'>
          <Form ref={this.formRef} layout='vertical' footer={<Button block type='submit' color='danger' onClick={this.onSubmit}> 保存提交 </Button>} >


            <Form.Item name='avatarUrl' label='头像' >
              <ImageUploader upload={(value) => this.imgUpload(value)} onChange={this.onChanges} maxCount={1} />
            </Form.Item>



            <Form.Item name='nick' label='昵称' >
              <Input placeholder={this.state.userinfo.nick} />
            </Form.Item>


            <Form.Item name='username' label='用户名' >
              <Input placeholder={this.state.userinfo.username} />
            </Form.Item>

            <Form.Item name='area' label='地区' onClick={() => this.setState({ visible: !this.state.visible })}>
              <Input placeholder='请选择地区' />
            </Form.Item>


            <Cascader options={areas} visible={this.state.visible} onConfirm={this.onConfirm} onClose={() => { this.setState({ visible: false }) }} />

          </Form>
        </div>
      </div >
    )
  }
  componentDidMount() {
    this.getUsermsg()
  }
  componentWillUnmount() {
    this.setState = () => false;
  }
  // 获取信息
  getUsermsg = () => {
    getUsermsg({
      token: getToken()
    }).then((res) => {
      console.log(res);
      this.setState({
        userinfo: res.data.data.base,
        fileList: [{ url: res.data.data.base.avatarUrl }]
      })
      console.log(this.state.fileList, 'getUsermsg');
      this.formRef.current.setFieldsValue(
        {
          avatarUrl: this.state.fileList,
          nick: this.state.userinfo.nick,
          username: this.state.userinfo.username,
          area: this.state.userinfo.province + '/' + this.state.userinfo.city
        })
    })
  }
  // 头像上传
  imgUpload = async (file) => {
    console.log(file);
    const token = getToken()
    let imgDate = new FormData()
    imgDate.append('upfile', file)
    imgDate.append('token', token)
    console.log(imgDate);
    await uploadImg(imgDate).then((res) => {
      this.setState({
        fileList: [{ url: res.data.data.url }],
        userinfo: { avatarUrl: res.data.data.url }
      })
    })
    return {
      url: this.state.fileList[0].url
    }
  }
  // 提交按钮
  onSubmit = () => {
    this.formRef.current.getFieldValue().avatarUrl = this.formRef.current.getFieldValue().avatarUrl[0].url
    console.log(this.formRef.current.getFieldValue());
    changeUsermsg({
      ...this.formRef.current.getFieldValue(),
      token: getToken()
    }).then((res) => {
      Toast.show({
        icon: 'success',
        content: '修改成功',
        duration: 1500,
        afterClose: () => {
          this.props.history.push('/user')
        }
      })
    })
  }
  // 选择地区
  onConfirm = (value) => {
    if (value.length === 0) {
      Toast.show({
        icon: 'fail',
        content: '还没选择地区',
        duration: 1500
      })
      return
    }
    let value0 = value[0], value1 = value[1], value2 = value[2]
    let areaArr = []
    for (let i = 0; i <= areas.length - 1; i++) {
      if (areas[i].value === value0) {
        areaArr.push(areas[i].label)
        for (let j = 0; j <= areas[i].children.length - 1; j++) {
          if (areas[i].children[j].value === value1) {
            areaArr.push(areas[i].children[j].label)
            for (let k = 0; k <= areas[i].children[j].children.length - 1; k++) {
              if (areas[i].children[j].children[k].value === value2) {
                areaArr.push(areas[i].children[j].children[k].label)
              }
            }
          }
        }
      }
    }
    this.formRef.current.getFieldValue().province = areaArr[0]
    this.formRef.current.getFieldValue().city = areaArr[1]
    this.formRef.current.setFieldsValue(
      {
        area: this.formRef.current.getFieldValue().province + '/' + this.formRef.current.getFieldValue().city
      }
    )
  }
}
